<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="关闭"
    @ok="submit"
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-checkable-tag color="blue" v-for="(item , index) in catUl" :key="index" v-model="item.check">{{item.name}}</a-checkable-tag>
    </a-spin>
  </a-modal>
</template>

<script>
import Category from "@/api/common/category";
// import ApiTree from "@/api/merchant/merchantList";
import ImageUpload from '@/components/ImageUpload';
import { Slime } from '@/mixins/slime';
export default {
  name: 'merchantPwdModal',
  components: { ImageUpload },
  data() {
    return {
      title: '修改类目',
      catUl:[
        {id:0, name:'', check: false},
      ]
    };
  },
  mixins: [Slime],
  methods: {
    // 详情
    open(catIdList) {
      this.visible = true;
      Category.getList({pid: 0}).then((res) => {
        let data = res.result;
        this.catUl = data.map((obj1)=>{
          let check = false
          catIdList.map((obj2)=>{
            if(obj2.id == obj1.id){
              check = true;
            }
          })
          return obj1 = {
            id: obj1.id,
            name: obj1.name,
            check: check
          }
        });
      });
    },
    // 提交
    submit() {
      const that = this;
      let catUl = this.catUl
      let ul = []
      for(let i=0;i<catUl.length;i++){
        if(catUl[i].check){
          let li = {
            id: catUl[i].id,
            name: catUl[i].name,
          }
          ul.push(li)
        }
      }
      this.$emit("chooseCat",ul)
      this.closeModal();
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>